<template>
  <div id="app">
    <div>
      <div class="wrap" v-if="!isMobile">
        <div class="nav_left" id="navLeft" v-for="(item) in Project" :key="item.id">
          <div class="nav_content" @click="PitchUp(item)">
            <span :class="{active:item.check}">{{item.title}}</span>
          </div>
        </div>
      </div>
      <keep-alive include="['VuexCartIndex']">
        <router-view :mobile = "isMobile" @change = "changeMobile"></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>

export default {
  name: "App",
  components: {},
  data() {
    return {
      defultPath: [
        {id:1, title: "小黑记事本", path: "/MyNotepad", check:true},
        {id:2, title: "成绩案例", path: "/AchievementCase",check:false },
        {id:3, title: "购物车", path: "/shoopingCart" ,check:false},
        {id:4, title: "记账清单", path: "/AccountList" ,check:false},
        {id:5, title: "封装表格", path: "/MyTable" ,check:false},
        {id:6, title: "面经", path: "/MoreauIndex" ,check:false},
        {id:7, title: "Vuex购物车", path: "/VuexCartIndex" ,check:false}

      ],
      Project :[],
      md:'',
      isMobile:false
    };
  },
  mounted(){
    this.Project =JSON.parse(sessionStorage.getItem('barlist'))  || this.defultPath
  },
  updated(){
    this.Project = this.defultPath
  },
  activated(){
    this.changeMobile()
  },
  deactivated(){},
  methods: {
    //是否是移动端
    changeMobile(e){
      this.isMobile = e
    },
    PitchUp(item){
      // 高亮控制
      this.Project.map(i =>{
        if(i.id ==item.id) {
        this.$router.push(item.path, () => {});
          return i.check = true
        }
        return i.check = false
      })
    }
  },
  watch:{
    Project:{
      deep:true,
      handler(newValue){
       sessionStorage.setItem('barlist',JSON.stringify(newValue))
      }
    }
  }
};
</script>

<style scoped>

.wrap {
  width: 100%;
  display: flex;
  margin: 10px 0;
  position: relative;
  background-color: #58bc58;
}

/*左侧的导航样式*/
.nav_left {
  width: 120px;
  overflow: scroll;
  text-align: center;
  
}
.nav_left:hover{
  cursor: pointer;
}
.nav_left::-webkit-scrollbar {
  display: none;
}

.nav_content {
  white-space: nowrap;
  padding: 0 0.7rem;
}

.nav_content span {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

.nav_content .active {
  border-bottom: 2px solid #000000;
  color: #ffffff;
}

.nav_left,
.down {
  float: left;
}
</style>
